<template>
<div class="line">
    <div ref="chart" class="chart"></div>
</div>
</template>

<script>

import echarts from '@/lib/echarts'
import { getElementSize } from '@/lib/util'
export default {
    name: 'Pie1Chart',
    props: {
         data: {type: Array, default: () => {return []}},
        unit: {type: String, default: ''},
        title: {type: String, default: ''},
        name: {type: String, default: ''},
        names:{type:Array, default: () => []},
         position: {type: String, default: 'right'} //饼图位置
    },
    data() {
        return {
            chart: null, //echart图表对象
            size: {width: 100, height: 100},
            sum: 0,
        }
    },
    watch: {
        '$store.state.windowResizeState' () { //监听浏览器窗口变化
            this.reDraw()
        },
        'data' () {
            this.init()
        }
    },
    mounted() {
        const that = this
        that.init()
    },
    methods: {
        init () {   //实例化图表
            const that = this
            // if(!that.data.length) {
            //     return
            // }
            that.size = getElementSize(that.$refs.chart)
            // that.size = getElementSize(that.$el)
            if(!that.chart) {
                that.chart = echarts.init(that.$refs.chart,false)
            }
            that.sum = 0
            
            const rm = that.$store.state.windowSize.rm
            
            const option =  {
    grid: {
        left: '5%',
        right: '10%',
        top: '10%',
        bottom: '10%',
        containLabel: true
    },
    tooltip: {
        show: true,
        trigger: 'item'
    },
    		legend: {
    			show:true,
    			right: '20',
    			icon: 'stack',
    			itemWidth:10,
    			itemHeight:10,
    			textStyle:{
    				color:'#1bb4f6'
    			},
    			data:['通过','未通过']
    		},
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLabel: {
            color: '#30eee9'
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#397cbc'
            }
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#195384'
            }
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }],
    yAxis: [{
            type: 'value',
            name: '',
            min: 0,
            max: 1000,
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: '#2ad1d2'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#27b4c2'
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#11366e'
                }
            }
        },

    ],
    series: [{
           
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
                normal: {
                    color: '#0092f6',
                    lineStyle: {
                        color: "#0092f6",
                        width: 1
                    },
                    //           areaStyle: { 
                    // 			//color: '#94C9EC'
                    // 			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    // 				offset: 0,
                    // 				color: 'rgba(7,44,90,0.3)'
                    // 			}, {
                    // 				offset: 1,
                    // 				color: 'rgba(0,146,246,0.9)'
                    // 			}]),
                    //           }
                }
            },
            markPoint: {
                itemStyle: {
                    normal: {
                        color: 'red'
                    }
                }
            },
            data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
            animationDuration:3000,
        },
        {
           
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 8,

            itemStyle: {
                normal: {
                    color: '#00d4c7',
                    lineStyle: {
                        color: "#00d4c7",
                        width: 1
                    },
                }
            },
            data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410],
            animationDuration:3000
        },

    ]
}
            that.chart.setOption(option, true)
        },
        reDraw () { //重绘图表
            const that = this
            if(that.chart) {
                that.size = getElementSize(that.$refs.chart)
                const rm = that.$store.state.windowSize.rm
                const option = {
                    grid: {
                        top: rm, left: 2*rm, right: 2*rm, bottom: rm
                    },
                    tooltip: {
                        textStyle: {
                            fontSize: 1.4 * rm
                        },
                    },
                    series: [{
                        // center: center,
                        label: {
                            lineHeight: rm * 2,
                        },
                    }]
                }
                that.chart.setOption(option)
                that.chart.resize(that.size)
            }else {
                that.init()
            }
        },
        },
        beforeDestroy () {
        const that = this
        if(that.chart){
            that.chart.dispose()
            that.chart = null
        }
    }
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1366px){
    .pie {
        font-size: 12px;
    }
}
@media screen and (min-width: 1367px){
    .pie {
        font-size: 14px;
    }
}
</style>
